.archive-sidebar {
  .years {
    @year-h: 60px;
    @month-h: 40px;

    .year {
      font-family: Georgia;
      cursor: pointer;

      &-text {
        height: @year-h;
        line-height: @year-h;
        padding-left: 20px;
        font-size: 20px;
        transition: box-shadow 0.5s, color 0.3s;
        color: var(--text_color);
      }

      &-box {
        height: 0;
        width: 100%;
        // box-shadow: inset 0 0 7px var(--gray_opacity_1);
        transition: height 0.5s;
        overflow: hidden;
      }

      &.year-active {
        border-bottom: none;

        .year-text {
          // box-shadow: 0 5px 7px var(--gray_opacity_1);
          color: var(--primary);
        }
      }

      &.expand {
        .year-box {
          height: var(--year_box_height);
        }
      }
    }

    .month {
      height: @month-h;
      line-height: @month-h;
      padding-left: 40px;
      font-size: 16px;
      transition: color 0.3s;
      color: var(--gray_5);

      &.month-active {
        color: var(--primary);
      }
    }
  }

  .layout-large & {
    .year-text {
      &:hover {
        // box-shadow: 0 0 7px var(--gray_opacity_1);
        color: var(--primary);
      }
    }

    .month {
      &:hover {
        color: var(--primary);
      }
    }
  }

  .layout-small & {
    background-color: var(--white);

    .year {
      &-box {
        box-shadow: inset 0 0 7px var(--gray_opacity_1);
      }

      &.year-active {
        .year-text {
          box-shadow: 0 5px 7px var(--gray_opacity_1);
        }
      }
    }
  }
}
